<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="query" clearable>
                        <el-button slot="append"  @click="serch" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <!--<el-col :span="4">
                    <el-button type="primary" @click="addInfo">添加类型</el-button>
                </el-col>-->
            </el-row>
            <el-table
                    :data="tableData"
                    stripe
                    border
                    style="width: 100%;">
                <el-table-column
                        fixed
                        prop="id"
                        label="id"
                >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名称"
                >
                </el-table-column>
                <el-table-column
                        prop="carname"
                        label="车辆名称"
                >
                </el-table-column>
                <el-table-column
                        prop="startTime"
                        label="开始时间"
                >
                </el-table-column>
                <el-table-column
                        prop="endTime"
                        label="结束时间"
                >
                </el-table-column>
                <el-table-column
                        prop="bshop"
                        label="租出门店"
                >
                </el-table-column>
                <el-table-column
                        prop="rshop"
                        label="归还门店"
                >
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="总金额"
                >
                </el-table-column>
                <el-table-column
                        prop="preparidAmount"
                        label="预付金额"
                >
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="订单状态"

                >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.state==1" >输入</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.state==2">提交</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state==3">预约</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state==4">使用中</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.state==5">交还</el-tag>
                        <el-tag type="info" v-else-if="scope.row.state==6">取消</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="isgetcarathome"
                        label="是否送车上门"

                >
                </el-table-column>
                <el-table-column
                        prop="getcarlocation"
                        label="上门地址ID"
                >
                </el-table-column>
                <el-table-column
                        prop="isreturncarathome"
                        label="是否上门还车"
                >
                </el-table-column>
                <el-table-column
                        prop="returncarlocation"
                        label="上门地址ID"
                >
                </el-table-column>
                <el-table-column
                        prop="addtime"
                        label="订单创建时间"
                >
                </el-table-column>
                <el-table-column
                        prop="orderno"
                        label="订单编号"
                        fixed="right"
                        width="130"
                >
                </el-table-column>

                <!--<el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        width="120"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="EditInfo(scope.row.id)"  size="medium" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete"  size="medium" @click="delInfo(scope.row.id,scope.row.status)" circle></el-button>
                        <el-button type="success" icon="el-icon-s-tools" size="medium" @click=""  circle></el-button>
                    </template>
                </el-table-column>-->
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>


        </el-card>
    </div>
</template>

<script>
    export default {
        name: "info",
        data(){
            return{
                //查询条件
                query:"",
                //当前页码
                currentPage: 1,
                //每页显示记录
                pageSize:5,
                //总条数
                total:0,
                //当前的记录数据
                tableData: [],
            }
        },
        //页面加载自动执行
        created() {
            this.initInfoTable(this.currentPage,this.pageSize);
        },
        methods: {

            //修改每页几条的方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.initInfoTable(this.currentPage, this.pageSize);
            },
            //修改页数的方法
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initInfoTable(this.currentPage, this.pageSize);
            },
            //模糊查询按钮的方法
            serch() {
                this.currentPage = 1;
                this.pageSize = 5;
                this.initInfoTable(this.currentPage, this.pageSize);
            },
            //初始化表格的方法
            initInfoTable(currentPage, pageSize) {
                var that = this;
                this.$http.post(`/order/order/findOrderByPage/${currentPage}/${pageSize}?query=${this.query}`).then(function (res) {
                    if (res.data.code == 200) {
                        that.tableData = res.data.data.records;
                        that.total = res.data.data.total;
                    } else {
                        that.$message.error("信息加载失败");
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>